<template>
  <div class="container" @dragover.prevent @drop="handleDrop">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from "vue";

// 容器组件
const emit = defineEmits(["drop1"]);
const props = defineProps({
  jsonSchema: Object,
  onDrop: Function,
});

// 组件被放入container回调
function handleDrop(e: any) {
  e.stopPropagation();
  const { onDrop, ...rest } = props;
  props?.onDrop && props.onDrop(e, rest);
}
</script>

<style scoped>
.container {
  border: 1px solid solid;
  background-color: #ececec;
  min-height: 300px;
  width: 100%;
}
</style>
